<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <view class="app-icon">
          <image class="app-logo" src="/static/logo-tu@2x.png" mode="aspectFill" />
        </view>
        <view class="app-title-section">
          <view class="app-title">学生端</view>
          <view class="app-subtitle">开始学习吧</view>
        </view>
      </view>
    </view>

    <!-- 快速导航 -->
    <view class="quick-nav">
      <view class="nav-cards">
        <view class="nav-card notebook-card">
          <image class="card-bg-image" src="https://donglem.oss-cn-hangzhou.aliyuncs.com/client/we_chat/notebook-BG.png" mode="aspectFill" />
          <view class="card-content">
            <view class="card-icon-wrapper">
              <image class="card-main-icon" src="/static/notebook-icon.png" mode="aspectFit" />
            </view>
            <text class="card-title">个性化快速练习</text>
            <view class="card-subtitle-btn" @tap="goToErrorBook">
              <text class="subtitle-text">错题本</text>
              <image class="subtitle-arrow" src="/static/gray-right-arrow.png" mode="aspectFit" />
            </view>
          </view>
        </view>

        <view class="nav-card photo-card">
          <image class="card-bg-image" src="https://donglem.oss-cn-hangzhou.aliyuncs.com/client/we_chat/photo-BG.png" mode="aspectFill" />
          <view class="card-content">
            <view class="card-icon-wrapper">
              <image class="card-main-icon" src="/static/photo-icon.png" mode="aspectFit" />
            </view>
            <text class="card-title">快速解决疑题</text>
            <view class="card-subtitle-btn" style="background: linear-gradient( 90deg, #0184FE 0%, #13AEF2 100%);" @tap="goToPhotoAnswer">
              <text class="subtitle-text">拍照答疑</text>
              <image class="subtitle-arrow" src="/static/gray-right-arrow.png" mode="aspectFit" />
            </view>
          </view>
        </view>

        <view class="nav-card paperCenter-card">
          <image class="card-bg-image" src="https://donglem.oss-cn-hangzhou.aliyuncs.com/client/we_chat/paperCenter-BG.png" mode="aspectFill" />
          <view class="card-content">
            <view class="card-icon-wrapper">
              <image class="card-main-icon" src="/static/paperCenter-icon.png" mode="aspectFit" />
            </view>
            <text class="card-title">考试原题测试</text>
            <view class="card-subtitle-btn" style="background: linear-gradient( 90deg, #FE7C02 0%, #FAAF37 100%);" @tap="goToPaperCenter">
              <text class="subtitle-text">试卷中心</text>
              <image class="subtitle-arrow" src="/static/gray-right-arrow.png" mode="aspectFit" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 最近考试成绩 -->
    <view class="recent-scores">
      <view class="score-title">最近考试成绩 <text class="score-date">(2025.04.16)</text></view>
      
      <view class="score-main-content">
        <view class="score-content">
          <view class="exam-header">
            <view class="exam-title-wrapper">
              <view class="exam-decoration-bar"></view>
              <view class="exam-title">2025年下学期期中考试</view>
            </view>
            <view class="more-link" @tap="viewMore">
              <text class="more-text">查看更多</text>
              <image class="more-arrow" src="/static/gray-right-arrow.png" mode="aspectFit" />
            </view>
          </view>
          
          <!-- 个人成绩卡片 -->
          <view class="score-cards">
            <!-- 总得分卡片 -->
            <view class="score-card" style="background-color: #EEF8FE;">
              <view class="card-icon">
                <image class="card-icon-img" src="https://donglem.oss-cn-hangzhou.aliyuncs.com/client/we_chat/icon-total-score.png" mode="aspectFit" />
              </view>
              <view class="card-number">{{ userInfo.totalScore }}</view>
              <view class="card-label">总得分(1000)</view>
            </view>
            
            <!-- 年级排名卡片 -->
            <view class="score-card" style="background-color: #FEF9ED;">
              <view class="card-icon">
                <image class="card-icon-img" src="https://donglem.oss-cn-hangzhou.aliyuncs.com/client/we_chat/icon-grade-rank.png" mode="aspectFit" />
              </view>
              <view class="card-number">{{ userInfo.gradeRank }}</view>
              <view class="card-label">年级排名</view>
            </view>
            
            <!-- 班级排名卡片 -->
            <view class="score-card" style="background-color: #E9FFF9;">
              <view class="card-icon">
                <image class="card-icon-img" src="https://donglem.oss-cn-hangzhou.aliyuncs.com/client/we_chat/icon-class-rank.png" mode="aspectFit" />
              </view>
              <view class="card-number">{{ userInfo.classRank }}</view>
              <view class="card-label">班级排名</view>
            </view>
          </view>
        </view>

        <!-- 各科成绩 -->
        <view class="subject-scores">
          <view class="subject-item">
            <text class="subject-name">语文(120)</text>
            <text class="subject-score">100</text>
          </view>
          <view class="subject-item">
            <text class="subject-name">数学(120)</text>
            <text class="subject-score">100</text>
          </view>
          <view class="subject-item">
            <text class="subject-name">英文(100)</text>
            <text class="subject-score">99</text>
          </view>
          <view class="subject-item">
            <text class="subject-name">综合(300)</text>
            <text class="subject-score">280</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 最新试卷 -->
    <view class="latest-papers">
      <view class="papers-header">
        <text class="papers-title">最新试卷</text>
        <view class="more-link"  style="background: transparent; color: #9AA5B8;" @tap="viewMorePapers">
          <text class="more-text" style="color: #9AA5B8;">查看更多</text>
          <image class="more-arrow" src="/static/gray-right-arrow.png" mode="aspectFit" />
        </view>
      </view>

      <!-- 试卷内容区域 -->
      <view class="papers-main-content">
        <!-- 科目筛选 -->
        <view class="subject-filter">
          <view class="filter-tabs">
            <view 
              v-for="subject in subjectTabs" 
              :key="subject.value"
              class="filter-tab"
              :class="{ active: activeSubject === subject.value }"
              @tap="switchSubject(subject.value)"
            >
              <image class="tab-icon" :src="subject.icon" mode="aspectFit" />
              <text class="tab-text">{{ subject.label }}</text>
            </view>
          </view>
        </view>

        <!-- 试卷列表 -->
        <view class="papers-list">
          <view 
            v-for="paper in filteredPapers" 
            :key="paper.id"
            class="paper-item"
            @tap="viewPaperDetail(paper)"
          >
            <view class="paper-icon">
              <image class="paper-type-icon" :src="paper.typeIcon" mode="aspectFit" />
            </view>
            <view class="paper-content">
              <view class="paper-info">
                <text class="paper-title">{{ paper.title }}</text>
                <view class="paper-meta">
                  <text class="meta-text">录入：{{ paper.createDate }}</text>
                  <view class="meta-row">
                    <text class="meta-text">浏览：{{ paper.views }}</text>
                    <text class="meta-text">下载：{{ paper.downloads }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>


  </view>
</template>

<script setup>
import { getCurrentInstance, ref, computed, onMounted } from 'vue'

const { appContext } = getCurrentInstance() || {}
const globalProps = appContext?.app?.config?.globalProperties || {}
const userUtils = globalProps.$user

// 系统信息
const statusBarHeight = ref(0)

// 用户信息数据
const userInfo = ref({
  name: '唐汉清',
  school: '沅陵县辰州中学',
  class: '2002班',
  phone: '189****0231',
  avatar: '/static/avatar.png',
  vip: '白银会员',
  stats: {
    assemblePapers: 6,
    downloads: 0,
    points: 898
  },
  totalScore: 923,
  gradeRank: 12,
  classRank: 2,
  grade: '初二'
})

// 当前选择的科目
const activeSubject = ref('all')

// 科目标签页
const subjectTabs = ref([
  { value: 'all', label: '全科', icon: '/static/overall-icon.png' },
  { value: 'chinese', label: '语文', icon: '/static/chinese-icon.png' },
  { value: 'english', label: '英语', icon: '/static/english-icon.png' },
  { value: 'math', label: '数学', icon: '/static/math-icon.png' },
  { value: 'physics', label: '物理', icon: '/static/physics-icon.png' }
])

// 试卷数据
const papersList = ref([
  {
    id: 1,
    title: '2023年02月20日微信用户的初中物理组卷',
    subject: 'physics',
    typeIcon: 'https://donglem.oss-cn-hangzhou.aliyuncs.com/client/we_chat/paper-icon-1.png',
    createDate: '2024-11-19',
    views: 100,
    downloads: 100
  },
  {
    id: 2,
    title: '2023年02月20日微信用户的初中物理组卷',
    subject: 'physics',
    typeIcon: 'https://donglem.oss-cn-hangzhou.aliyuncs.com/client/we_chat/paper-icon-2.png',
    createDate: '2024-11-19',
    views: 100,
    downloads: 100
  },
  {
    id: 3,
    title: '2023年02月20日微信用户的初中语文组卷',
    subject: 'chinese',
    typeIcon: 'https://donglem.oss-cn-hangzhou.aliyuncs.com/client/we_chat/paper-icon-3.png',
    createDate: '2024-11-19',
    views: 100,
    downloads: 100
  },
  {
    id: 4,
    title: '2023年02月20日微信用户的初中数学组卷',
    subject: 'math',
    typeIcon: 'https://donglem.oss-cn-hangzhou.aliyuncs.com/client/we_chat/paper-icon-1.png',
    createDate: '2024-11-19',
    views: 100,
    downloads: 100
  },
  {
    id: 5,
    title: '2023年02月20日微信用户的初中英语组卷',
    subject: 'english',
    typeIcon: 'https://donglem.oss-cn-hangzhou.aliyuncs.com/client/we_chat/paper-icon-2.png',
    createDate: '2024-11-19',
    views: 100,
    downloads: 100
  }
])



// 计算过滤后的试卷
const filteredPapers = computed(() => {
  if (activeSubject.value === 'all') {
    return papersList.value
  }
  return papersList.value.filter(paper => paper.subject === activeSubject.value)
})

// 切换科目
const switchSubject = (subject) => {
  activeSubject.value = subject
}



import { goTo, goToDebounced } from '@/utils/navigation.js'

// 快速导航点击
const goToErrorBook = () => {
  goTo('/subpackages/student-functions/mistakeBook')
}

const goToPhotoAnswer = () => {
  uni.showToast({
    title: '跳转到拍照答疑',
    icon: 'none'
  })
}

const goToPaperCenter = () => {
  goTo('/subpackages/student-functions/paperCenter')
}

// 查看更多
const viewMore = () => {
  goTo('/subpackages/learning-analysis/checkLearningStatus')
}

const viewMorePapers = () => {
  uni.showToast({
    title: '查看更多试卷',
    icon: 'none'
  })
}

// 查看试卷详情
const viewPaperDetail = (paper) => {
  uni.showToast({
    title: `查看试卷：${paper.title}`,
    icon: 'none'
  })
}

onMounted(() => {
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0

  const storedInfo = userUtils?.getUserInfo?.()
  if (storedInfo) {
    userInfo.value = {
      ...userInfo.value,
      name: storedInfo.userName || userInfo.value.name,
      school: storedInfo.dictName || userInfo.value.school,
      class: storedInfo.class_name || uni.getStorageSync('className') || userInfo.value.class,
      grade: storedInfo.grade_name || uni.getStorageSync('gradeName') || userInfo.value.grade,
      avatar: storedInfo.user_avatar || userInfo.value.avatar
    }
  }
})
</script>

<style scoped lang="scss">
// 使用learningStatus.vue中的.page样式
.page {
  min-height: 100vh;
  background: 
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 20%, rgba(255,255,255,1) 100%),
    linear-gradient(270deg, #ACFB97 0%, rgba(52,207,185,0) 100%),
    linear-gradient(270deg, rgba(95,141,227,0) 0%, #00C9FF 100%),
    linear-gradient(114deg, #F0FFFD 0%, #FCFCFD 100%);
  position: relative;
}

.status-bar {
  width: 100%;
}

// 自定义导航栏样式
.custom-navbar {
  height: 120rpx;
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  position: relative;
}

.navbar-content {
  display: flex;
  align-items: center;
}

.app-icon {
  width: 64rpx;
  height: 64rpx;
  margin-right: 16rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.app-logo {
  width: 100%;
  height: 100%;
}

.app-title-section {
  display: flex;
  flex-direction: column;
}

.app-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 40rpx;
  color: #191E31;
  line-height: 48rpx;
}

.app-subtitle {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color:  rgba(32,32,32,0.5);
  line-height: 32rpx;
  margin-top: 4rpx;
}

// 快速导航
.quick-nav {
  margin: 0 24rpx 32rpx 24rpx;
}

.nav-title {
  font-family: MiSans, MiSans;
  font-weight: 600;
  font-size: 32rpx;
  color: #191E31;
  line-height: 48rpx;
  margin-bottom: 24rpx;
}

.nav-cards {
  display: flex;
  flex-direction: row;
  gap: 12rpx;
  justify-content: center;
}

.nav-card {
  width: 275rpx;
  height: 246rpx;
  border-radius: 16rpx;
  position: relative;
  overflow: hidden;
}

.card-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  //border-radius: 16rpx;
  z-index: 1;
}

.card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card-icon-wrapper {
  width: 120rpx;
  height: 110rpx;
  position: absolute;
  left: 32rpx;
  top: -10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.card-main-icon {
  width: 100%;
  height: 100%;
}

.card-title {
    font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #FFFFFF;
  line-height: 24rpx;
  text-align: center;
  margin-bottom: 14rpx;
  margin-top: 70rpx;
}

.card-subtitle-btn {
  width: 182rpx;
  height: 52rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 90deg, #00A46C 0%, #01D18B 100%);
  border-radius: 48rpx;
  box-shadow: 0rpx 2rpx 2rpx 0rpx rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.3s ease;
}

.card-subtitle-btn:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.95);
}

.subtitle-text {
  font-family: 腾讯体, 腾讯体;
  font-weight: 400;
  font-size: 26rpx;
  color: #FFFFFF;
  line-height: 39rpx;
  text-shadow: 0px 2px 4px #048357;
  text-align: center;
  margin-right: 8rpx;
  margin-bottom: 10rpx;
}

.subtitle-arrow {
  width: 16rpx;
  height: 16rpx;
  filter: brightness(0) invert(1);
}

// 最近考试成绩
.recent-scores {
  margin: 0 24rpx 32rpx 24rpx;
  background: linear-gradient( 90deg, #41D6F0 0%, #B6F3BC 100%);
  border-radius: 24rpx;
  border: 4rpx solid transparent;
  background-clip: padding-box;
  position: relative;
  padding: 8rpx;
  min-height: 200rpx;
}

.recent-scores::before {
  content: '';
  position: absolute;
  top: -4rpx;
  left: -4rpx;
  width: calc(100% + 8rpx);
  height: calc(100% + 8rpx);
  background: linear-gradient(90deg, rgba(65, 214, 240, 1), rgba(182, 243, 188, 1));
  border-radius: 24rpx;
  z-index: -1;
}

.score-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 36rpx;
  color: #191E31;
  line-height: 48rpx;
  margin:24rpx 24rpx 16rpx;
}

.score-date {
  font-weight: 500;
  font-size: 28rpx;
  color: #68708A;
}

.score-main-content {
  display: flex;
  background: #FFFFFF;
  border-radius: 20rpx;
  flex-direction: column;
  padding: 32rpx 24rpx;
  gap: 24rpx;
}

.score-content {
  display: flex;
  flex-direction: column;
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.exam-title-wrapper {
  display: flex;
  align-items: center;
}

.exam-decoration-bar {
  width: 6rpx;
  height: 32rpx;
  background: linear-gradient(180deg, #61E0C7 0%, #76F46C 100%);
  border-radius: 3rpx;
  margin-right: 16rpx;
}

.exam-title {
  font-family: MiSans, MiSans;
  font-weight: 400;
  font-size: 28rpx;
  color: #191E31;
  line-height: 40rpx;
}

.more-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168rpx;
  height: 48rpx;
  background: #E9FFF9;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  position: relative;
}

.more-text {
    font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #0ED1AD;
  line-height: 24rpx;
  text-align: center;
  flex: 1;
}

.more-arrow {
  width: 16rpx;
  height: 16rpx;
  position: absolute;
  right: 20rpx;
}

// 成绩卡片样式 - 复制自checkLearningStatus.vue
.score-cards {
  display: flex;
  justify-content: space-between;
  margin: 24rpx 0;
  width: 100%;
}

.score-card {
  width: 138rpx;
  height: 80rpx;
  padding: 24rpx 32rpx;
  border-radius: 12rpx;
  //display: flex;
  //flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #96E8E3;
}

.card-icon {
  width: 85rpx;
  height: 90rpx;
  position: absolute;
  top: 10rpx;
  right: 0rpx;
}

.card-icon-img {
  width: 100%;
  height: 100%;
}

.card-number {
  width: 146rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 40rpx;
  color: #191E31;
  line-height: 40rpx;
  margin-bottom: 16rpx;
}

.card-label {
  width: 146rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #68708A;
  line-height: 24rpx;
  text-align: left;
}

// 各科成绩
.subject-scores {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background: linear-gradient( 90deg, #F4FEFD 0%, rgba(244,254,253,0) 100%);
  box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0,0,0,0.1);
  border-radius: 12rpx 12rpx 12rpx 12rpx;
}

.subject-item {
  width: 120rpx;
  height: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subject-name {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #9AA5B8;
  line-height: 40rpx;
  margin-bottom: 8rpx;
}

.subject-score {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #191E31;
  line-height: 32rpx;
}

// 最新试卷
.latest-papers {
  margin: 0 24rpx 32rpx 24rpx;
}

.papers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.papers-title {
    font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 36rpx;
  color: #191E31;
  line-height: 48rpx;
  margin-left: 16rpx;
}

// 试卷主要内容区域
.papers-main-content {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  background: linear-gradient( 114deg, #F0FFFD 0%, #FCFCFD 100%);
  box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(47,71,71,0.05);
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  border: 4rpx solid #FFFFFF;
  padding: 32rpx;
}

// 科目筛选
.subject-filter {
  margin-bottom: 0; /* 移除，由父元素的gap控制间距 */
}

.filter-tabs {
  display: flex;
  gap: 68rpx;
}

.filter-tab {
  width: 68rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.filter-tab.active {
  
}

.tab-icon {
  width: 68rpx;
  height: 88rpx;
}

.tab-text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #9AA5B8;
  line-height: 40rpx;
}

.filter-tab.active .tab-text {
  color: #191E31;
  font-weight: 500;
}

// 试卷列表
.papers-list {
  display: flex;
  flex-direction: column;
}

.paper-item {
  height: 188rpx;
  display: flex;
  align-items: center;
}

.paper-icon {
  width: 144rpx;
  height: 144rpx;
  margin-right: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paper-type-icon {
  width: 100%;
  height: 100%;
}

.paper-content {
  flex: 1;
}

.paper-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #191E31;
  line-height: 40rpx;
  text-align: left;
  margin-bottom: 4rpx;
}

.paper-meta {
  display: flex;
  flex-direction: column;
  width: 382rpx;
}

.meta-row {
  display: flex;
  justify-content: space-between;
}

.meta-text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #9AA5B8;
  line-height: 40rpx;
  text-align: left;
}


</style>
